angular.module("ui.bootstrap.demo", [
  "ngAnimate",
  "ngSanitize",
  "ui.bootstrap",
]);
angular
  .module("ui.bootstrap.demo")
  .controller("ModalDemoCtrl", function ($scope, $uibModal, $log, $document) {
    const $ctrl = this;
    $ctrl.items = ["item1", "item2", "item3"];

    $ctrl.animationsEnabled = true;

    $ctrl.open = function (size, parentSelector) {
      const parentElem = parentSelector
        ? $($document[0].querySelector(`.modal-demo ${parentSelector}`))
        : undefined;
      const modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: "modal-title",
        ariaDescribedBy: "modal-body",
        templateUrl: "myModalContent.html",
        controller: "ModalInstanceCtrl",
        controllerAs: "$ctrl",
        size,
        appendTo: parentElem,
        resolve: {
          items() {
            return $ctrl.items;
          },
        },
      });

      modalInstance.result.then(
        (selectedItem) => {
          $ctrl.selected = selectedItem;
        },
        () => {
          $log.info(`Modal dismissed at: ${new Date()}`);
        },
      );
    };

    $ctrl.openComponentModal = function () {
      const modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        component: "modalComponent",
        resolve: {
          items() {
            return $ctrl.items;
          },
        },
      });

      modalInstance.result.then(
        (selectedItem) => {
          $ctrl.selected = selectedItem;
        },
        () => {
          $log.info(`modal-component dismissed at: ${new Date()}`);
        },
      );
    };

    $ctrl.openMultipleModals = function () {
      $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: "modal-title-bottom",
        ariaDescribedBy: "modal-body-bottom",
        templateUrl: "./stackedModal.html",
        size: "sm",
        controller($scope) {
          $scope.name = "bottom";
        },
      });

      $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: "modal-title-top",
        ariaDescribedBy: "modal-body-top",
        templateUrl: "./stackedModal.html",
        size: "sm",
        controller($scope) {
          $scope.name = "top";
        },
      });
    };

    $ctrl.toggleAnimation = function () {
      $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
    };
    $ctrl.handleClick = () => {
      console.log($scope);
    };
  });

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular
  .module("ui.bootstrap.demo")
  .controller("ModalInstanceCtrl", function ($uibModalInstance, items) {
    const $ctrl = this;
    $ctrl.items = items;
    $ctrl.selected = {
      item: $ctrl.items[0],
    };

    $ctrl.ok = function () {
      $uibModalInstance.close($ctrl.selected.item);
    };

    $ctrl.cancel = function () {
      $uibModalInstance.dismiss("cancel");
    };
  });

// Please note that the close and dismiss bindings are from $uibModalInstance.

angular.module("ui.bootstrap.demo").component("modalComponent", {
  templateUrl: "myModalContent.html",
  bindings: {
    resolve: "<",
    close: "&",
    dismiss: "&",
  },
  controller() {
    const $ctrl = this;

    $ctrl.$onInit = function () {
      $ctrl.items = $ctrl.resolve.items;
      $ctrl.selected = {
        item: $ctrl.items[0],
      };
    };

    $ctrl.ok = function () {
      $ctrl.close({ $value: $ctrl.selected.item });
    };

    $ctrl.cancel = function () {
      $ctrl.dismiss({ $value: "cancel" });
    };
  },
});
